<template>
  <view class="language-page">
    <Toptab :list="nav"></Toptab>
    <u-loading-page
      :loading="showLoading"
      bg-color="#000"
      font-size="14"
      loadingMode="semicircle"
      :loading-text="i18n.h105"
    ></u-loading-page>

    <view v-if="!showLoading" class="section-conter">
      <view class="row-item" v-for="(lag, index) in langList" :key="index">
        <view class="row-layet" @click="toLang(lag)">
          <view class="row-left">
            <image :src="'/static/images/' + lag.status + '.png'" alt="" />
          </view>
          <view class="row-right">
            <view>{{ lag.name }}</view>
            <!-- <image
              v-if="activeLang == lag.status"
              src="/static/images/acles.png"
              alt=""
            /> -->
            <view v-if="activeLang == lag.status" class="icons"></view>
            <image v-else src="/static/images/cle.png" alt="" />
          </view>
        </view>
        <!-- <view class="lines" v-if="index < 1">
          <view></view>
        </view> -->
      </view>
    </view>
  </view>
</template>
    <script>
import Toptab from "../../components/toptab/toptab.vue";

export default {
  components: {
    Toptab,
  },
  props: {},
  data() {
    return {
      pageName: "切换语言",
      showLoading: true,
      activeLang: "",
    };
  },

  watch: {},
  computed: {
    i18n() {
      return this.$t("home");
    },
    nav() {
      return {
        title: this.$t("home.h0"),
      };
    },

    langList() {
      return [
        {
          name: "中文(繁体)",
          status: "zh",
          parms: "zh",
          tips: "繁",
          isOpen: true,
        },

        {
          name: "Engilsh",
          status: "en",
          parms: "en",
          tips: "EN",
          isOpen: true,
        },
        {
          name: "日本語",
          status: "ja",
          parms: "ja",
          tips: "JA",
          isOpen: true,
        },
        {
          name: "한국인",
          status: "ko",
          parms: "ko",
          tips: "KO",
          isOpen: true,
        },
        {
          name: "Tiếng Việt",
          status: "vi",
          parms: "vi",
          tips: "VI",
          isOpen: true,
        },
        {
          name: "ภาษาไทย",
          status: "th",
          parms: "th",
          tips: "TH",
          isOpen: true,
        },
        {
          name: "Español",
          status: "es",
          parms: "es",
          tips: "ES",
          isOpen: true,
        },
      ];
    },
  },

  created() {},
  mounted() {},
  onShow() {
    this.init();
  },
  methods: {
    init() {
      this.showLoading = false;
      this.activeLang = uni.getStorageSync("lang")
        ? uni.getStorageSync("lang")
        : "zh";
      this.langList.forEach((item) => {
        if (item.status == this.activeLang) {
          uni.setStorageSync("akcLang", item.parms);
        }
      });
    },

    toLang(val) {
      if (val.isOpen) {
        this.$i18n.locale = val.status;
        this.activeLang = val.status;
        uni.setStorageSync("lang", val.status);
        uni.setStorageSync("akcLang", val.parms);
        uni.showToast({
          icon: "none",
          title: this.$t("home.h001"),
        });
        // 设置2秒后刷新页面
        setTimeout(function () {
          location.reload();
        }, 800);

        //   this.$emit("updateLang", val); //部分页面需要同步展示最新语言
        // console.log("语言this.$i18n.locale--", this.$i18n.locale);
      } else {
        uni.showToast({
          icon: "none",
          title: "Not yet available", //暂未开通
        });
      }
    },
  },
};
</script>
        
<style lang="scss" scoped>
.language-page {
  .section-conter {
    padding: 150rpx 32rpx 20rpx;
    .row-item {
      padding: 80rpx 0 0;
      .row-layet {
        display: flex;
        align-items: center;
        width: 100%;
        .row-left {
          border-radius: 50%;
          width: 48rpx;
          height: 48rpx;
          image {
            border-radius: 50%;
            width: 48rpx;
            height: 48rpx;
          }
        }
        .row-right {
          flex: 1;
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin-left: 20rpx;

          view {
            font-size: 28rpx;
            color: #222222;
          }
          .atv {
            color: #13ccd7;
          }
          .icons {
            width: 30rpx;
            height: 30rpx;
            border-radius: 50%;
            background: #835bf1;
            // background: linear-gradient(113deg, #17ee97 0%, #3db7ff 100%);
          }
          image {
            width: 30rpx;
            height: 30rpx;
          }
        }
      }
      .lines {
        display: flex;
        justify-content: flex-end;
        padding-top: 32rpx;
        view {
          width: calc(100% - 132rpx);
          height: 3rpx;
          border-bottom: 4rpx dashed #1e1e1e;
        }
      }
    }
  }
}
</style>
          